<template>
    <div>
        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l322') }}
                </div>
                <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;"
                    @click="editCustom">{{ $t('text.House.l14') }}</el-button>
            </div>
            <div class="flex2" v-if="isSecondHand == '0'">
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l96') }}</div>
                    <div>
                        {{ (BasicDetailList.lowerPrice==null?$t('text.Customer.l2'): String(BasicDetailList.lowerPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') ) }}-
                        {{ (BasicDetailList.upperPrice==null?$t('text.Customer.l2'): String(BasicDetailList.upperPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' AED') }}&emsp;
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l97') }}</div>
                    <div>
                        {{ (BasicDetailList.lowerArea==null?$t('text.Customer.l2'): String(BasicDetailList.lowerArea).replace(/\B(?=(\d{3})+(?!\d))/g, ',') ) }}-
                        {{ (BasicDetailList.upperArea==null?$t('text.Customer.l2'): String(BasicDetailList.upperArea).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' m²') }}&emsp;
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l98') }}</div>
                    <div>
                        {{ BasicDetailList.houseType == '0' ? $t('text.House.l187') : BasicDetailList.houseType == '1' ?
                            $t('text.House.l188') :
                            BasicDetailList.houseType == '2' ? $t('text.House.l189') : BasicDetailList.houseType == '3' ?
                                $t('text.House.l190') :
                                BasicDetailList.houseType == '3' ? $t('text.House.l191') : '' }}
                        {{ BasicDetailList.houseType != null && BasicDetailList.houseDetailsType != null ?
                            '-' + BasicDetailList.houseDetailsType : '' }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l99') }}</div>
                    <div>{{ BasicDetailList.unitType == null ? $t('text.Customer.l2') : BasicDetailList.unitType }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l100') }}</div>
                    <div>{{ BasicDetailList.decorationLevel == null ? $t('text.Customer.l2') :
                        BasicDetailList.decorationLevel }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l101') }}</div>
                    <div>{{ BasicDetailList.lowerStorey }}-{{ BasicDetailList.upperStorey }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l102') }}</div>
                    <div>{{ BasicDetailList.toward == null ? $t('text.Customer.l2') : BasicDetailList.toward }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l103') }}</div>
                    <div>{{ BasicDetailList.purpose == null ?  $t('text.Customer.l2') : BasicDetailList.purpose }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l104') }}</div>
                    <div>{{ BasicDetailList.area == null ? $t('text.Customer.l2') : BasicDetailList.area == '-' ?
                        $t('text.Customer.l2') : BasicDetailList.area
                    }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l105') }}</div>
                    <div>{{ BasicDetailList.intentionCommunity == null ? $t('text.Customer.l2') :
                        BasicDetailList.intentionCommunity }}</div>
                </div>
            </div>

            <div class="flex2" v-if="isSecondHand == '1'">
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l96') }}</div>
                    <div>{{ BasicDetailList.lowerRent }}-{{ BasicDetailList.lowerRent }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l97') }}</div>
                    <div>{{ BasicDetailList.lowerArea }}-{{ BasicDetailList.upperArea }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l98') }}</div>
                    <div>
                        {{ BasicDetailList.houseType == '0' ? $t('text.House.l187') : BasicDetailList.houseType == '1' ?
                            $t('text.House.l188') :
                            BasicDetailList.houseType == '2' ? $t('text.House.l189') : BasicDetailList.houseType == '3' ?
                                $t('text.House.l190') :
                                BasicDetailList.houseType == '3' ? $t('text.House.l191') : '' }}
                        {{ BasicDetailList.houseType != null && BasicDetailList.houseDetailsType != null ?
                            '-' + BasicDetailList.houseDetailsType : '' }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l99') }}</div>
                    <div>{{ BasicDetailList.unitType == null ? $t('text.Customer.l2') : BasicDetailList.unitType }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l100') }}</div>
                    <div>{{ BasicDetailList.decorationLevel == null ? $t('text.Customer.l2') :
                        BasicDetailList.decorationLevel }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l101') }}</div>
                    <div>{{ BasicDetailList.placeStorey }}/{{ BasicDetailList.totalFloor }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l102') }}</div>
                    <div>{{ BasicDetailList.toward == null ? $t('text.Customer.l2') : BasicDetailList.toward }}</div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l104') }}</div>
                    <div>{{ BasicDetailList.area == null ? $t('text.Customer.l2') : BasicDetailList.area == '-' ?
                        $t('text.Customer.l2') : BasicDetailList.area
                    }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div class="cdt1">{{ $t('text.House.l105') }}</div>
                    <div>{{ BasicDetailList.intentionCommunity == null ? $t('text.Customer.l2') :
                        BasicDetailList.intentionCommunity }}</div>
                </div>
            </div>


        </div>


        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.Customer.l3') }}
                </div>
                <DialogLayout13 type="客源"><el-button round
                        style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                            $t('text.House.l15') }}</el-button>
                </DialogLayout13>
            </div>
            <div style="display: flex;width: 100%;">
                <ToppingCard isCustomer :cardLoad="cardLoad"></ToppingCard>
            </div>
        </div>


        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.Customer.l4') }}
                </div>
                <DialogLayout8 isCustomer @returnData="setRole">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l16') }}</el-button>
                </DialogLayout8>
            </div>
            <div class="flex3">
                <div v-for="s in peopleListCopy" v-bind:key="s" class="role">
                    <div class="flex" style="flex: 1;align-items: center;position: relative;">
                        <CommonImage class="head" :src="s.avatar"/>
                        <div class="flexc3">
                            <div class="tt2">{{ s.username }}</div>
                            <div class="tt1">{{ s.role }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import CommonImage from '../../components/input/CommonImage.vue'
import DialogLayout8 from '@/components/dialogLayout/DialogLayout8.vue'
import DialogLayout13 from '@/components/dialogLayout/DialogLayout13.vue'
import ToppingCard from '@/components/houseList/ToppingCard.vue'
import pinia from '../../store'
import { useHouse } from '../../store/houseShareData'

export default {
    name: 'CustomBasicDetail',
    props: {
        isSecondHand: {
            default: '0',
            type: String
        },
        BasicDetailList: {
            default: {}
        },
        peopleList: {
            default: []
        },
    },
    components: {
        CommonImage,
        DialogLayout8,
        DialogLayout13,
        ToppingCard
    },
    data() {
        return {
            isonMouse: false,
            mouseIndex: 0,
            peopleListCopy: this.peopleList,
            cardLoad: false,
        }
    },
    mounted() {
    },
    methods: {

        editCustom() {
            localStorage.setItem("addCustom", JSON.stringify(this.BasicDetailList))
            if(this.BasicDetailList.customerClass=='2'){
                this.$router.push({ path: '/addCustom', query: { edit: true, index: this.$route.query.index} })
            }else{
                this.$router.push({ path: '/addCustom', query: { edit: true, index: this.BasicDetailList.customerClass } })
            }
        },
        setRole(params) {
            let index = this.peopleListCopy.findIndex(v => v.role === params.role)
            if (index >= 0) {
                this.peopleListCopy[index].username = params.realName
            } else {
                let temp = {
                    role: params.role,
                    username: params.realName,
                    avatar: null,
                    sysUserId: ""
                }
                this.peopleListCopy.push(temp)
            }
        },
    },
    watch: {
        peopleList() {
            this.peopleListCopy = this.peopleList
        },
        houseFollowUp() {
            this.cardLoad = !this.cardLoad
        }
    },
    computed: {
        houseFollowUp() {
            return useHouse(pinia).houseFollowUp
        }
    },

}
</script>
    
<style scoped>
.role {
    min-width: 200px;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    padding-top: 10px;
}

.p1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.BasicDetail {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.flex2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex3 {
    display: flex;
    align-items: center;
    margin-left: 35px;
    margin-right: 35px;
    flex-wrap: wrap;
}

.flexc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexc3 {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 35px;
}

.tt1 {
    text-align: left;
    font-size: 13px;
    color: gray;
    padding-top: 10px;
}

.tt2 {
    text-align: left;
    font-size: 13px;
    color: black;
    padding-top: 10px;
    word-break: break-all;
}

.head {
    width: 40px;
    height: 40px;
    margin-top: 12px;
    border: 1px solid #eee;
    border-radius: 50px;
}

.attributeItem {
    width: 20%;
    text-align: left;
    margin-left: 35px;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cdt1 {
    color: #888;
    padding-bottom: 5px;
}</style>